<template>
  <md-page title="完赛证明">
    <view class="page-map">
      <view v-if="data.score_urls.length">
        <image
          v-for="score_url in data.score_urls"
          :key="score_url"
          class="score-img"
          :src="score_url"
          @click="() => handlePreview(score_url)"></image>
      </view>

      <view class="empty" v-else>成绩单生成中...</view>
    </view>
  </md-page>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { matchViewScore } from '@/api';

const data = reactive<any>({
  active_id: '',
  score_urls: [],
});

const handlePreview = (url: string) => {
  uni.previewImage({
    current: url,
    urls: data.score_urls,
  });
};

/**
 * 获取比赛成绩单
 */

const getScore = async () => {
  uni.showLoading({
    title: '加载中...',
    mask: true,
  });
  let active_id = data.active_id;
  try {
    const res = await matchViewScore({ active_id });
    data.score_urls = res?.data;
  } catch (error) {}
  uni.hideLoading();
};

onLoad(options => {
  data.active_id = options?.active_id;
  getScore();
});
</script>

<style lang="scss" scoped>
.page-map {
  position: relative;
  .score-img {
    width: 100vw;
    height: 100vh;
  }
  .empty {
    text-align: center;
    font-size: 48rpx;
    color: #d92121;
    margin-top: 40rpx;
  }
}
</style>
